import React from 'react';
import {useImmerReducer} from "use-immer";
import Header from './Header'
import List from './List'
import todosReducer from "./todosReducer.js";
import './index.scss'

const initTodos = [
  {id: '0001', name: '吃饭', done: false},
  {id: '0002', name: '睡觉', done: true},
  {id: '0003', name: '打代码', done: false},
]

function ReducerTodos() {
  // 使用 useImmerReducer 来管理状态：传入一个处理事件的方法和状态的初始值
  const [todos, dispatch] = useImmerReducer(todosReducer, initTodos)

  return (
    <div className="todoCon">
      <Header dispatch={dispatch} />
      <List todos={todos} dispatch={dispatch}/>
    </div>
  );
}

export default ReducerTodos;
